<!DOCTYPE HTML>
<html>
<head>
    <title>分布图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        #up-map-div {
            width:500px;
            height:40px;
            top:40px;
            left:40px;
            position:absolute;
            z-index:9999;
        }
        #battery-status-div {
            width:190px;
            height:160px;
            top:140px;
            left:40px;
            position:absolute;
            z-index:9999;
            background-color: rgba(102, 102, 102, 0.2);
        }
        .button {
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 13;
            -moz-border-radius: 13;
            border-radius: 13px;
            font-family: Arial;
            color: #ffffff;
            font-size: 14px;
            padding: 6px 20px 6px 20px;
            text-decoration: none;
        }

        .button:hover {
            background: #2980b9;
            background-image: -webkit-linear-gradient(top, #2980b9, #3498db);
            background-image: -moz-linear-gradient(top, #2980b9, #3498db);
            background-image: -ms-linear-gradient(top, #2980b9, #3498db);
            background-image: -o-linear-gradient(top, #2980b9, #3498db);
            background-image: linear-gradient(to bottom, #2980b9, #3498db);
            color: #ffffff;
            text-decoration: none;
        }
        #battery_id {
            width: 200px;
            height: 25px;
            margin-right: 20px;
            border-radius: 5px;
            border-style: hidden;
            padding-left: 5px;
        }
        li {list-style-type:none;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${controller.appConfig.mapKey}"></script>
    <script type="text/javascript" src="${contextPath}/static/tool/jquery/jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="allmap"></div>
<#-- 悬浮搜索框 -->
<div id="up-map-div">
    <span style="color:white">电池编号：</span>
    <input type="text" class="text" id="battery_id" name="batteryId"/>
    <button class="button" onclick="query()">搜索</button>
</div>
<#-- 悬浮电池信息框 -->
<div id="battery-status-div" style="color: white">
    <ul>
        <li>电池总数：<span id="battery_sum"></span></li>
        <li><img src="/static/images/battery_status_white.png" style="width: 20px;height: 20px"/> 空闲：<span id="status1"></span></li>
        <li><img src="/static/images/battery_status_yellow.png" style="width: 20px;height: 20px"/> 充电中：<span id="status2"></span></li>
        <li><img src="/static/images/battery_status_green.png" style="width: 20px;height: 20px"/> 充满：<span id="status3"></span></li>
        <li><img src="/static/images/battery_status_lightBlue.png" style="width: 20px;height: 20px"/> 使用中：<span id="status4"></span></li>
        <li><img src="/static/images/battery_status_gray.png" style="width: 20px;height: 20px"/> 其他：<span id="status5"></span></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(109.369334, 38.16197), 5);  // 初始化地图,设置中心点坐标和地图级别
    map.setCurrentCity("西安");           // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    var convertor = new BMap.Convertor();
    var pointList = new Array();
    var pointFindByBatteryId = []; // 设置全局数据集(all)
    var batteryIdList = []; // 设置全局数据集(batteryId)
    if (document.createElement('canvas').getContext) {  // 设置画布
        var mapStyle = {
            features: ["road", "building", "water", "land"], // 隐藏地图上的poi Point of Interest
            style: "dark"  // 设置地图风格为高端黑
        };
        map.setMapStyle(mapStyle); // 设置地图风格
        <#-- ajax 请求数据（坐标） -->
        $.post("${contextPath}/security/hdw/battery/coordinate.htm", function (json) {
            if (json.success == 1) {
//                pointList.length = 0;
//                pointListInfo(json.data);
                var points1 = [];  // 添加海量点数据
                var points2 = [];  // 添加海量点数据
                var points3 = [];  // 添加海量点数据
                var points4 = [];  // 添加海量点数据
                var points5 = [];  // 添加海量点数据（其他）
                <#--
                    解决海量点坐标信息展示 add
                        FREE(1, "空闲"),
                        CHARGE(2, "充电中"),
                        FULL(3, "充满"),
                        BUSY(4, "使用中"),
                    业务：根据状态显示不同的颜色，现在是4种状态（判断 length是否大于零）
                -->
                for(var i = 0; i < json.data.length; i++) {
                    <#-- id,shellCode,status,socVolume,exchangeAmount -->
                    var point = new BMap.Point(json.data[i].lng, json.data[i].lat);
                    point.id = json.data[i].id;
                    batteryIdList.push(json.data[i].id);
                    point.shellCode = json.data[i].shell_code;
                    point.socVolume = json.data[i].soc_volume;
                    point.exchangeAmount = json.data[i].exchange_amount;
                    pointFindByBatteryId.push(point);
                    switch (json.data[i].status) {
                        case (1):
                            point.status = "空闲";
                            points1.push(point);
                            break;
                        case (2):
                            point.status = "充电中";
                            points2.push(point);
                            break;
                        case (3):
                            point.status = "充满";
                            points3.push(point);
                            break;
                        case (4):
                            point.status = "使用中";
                            points4.push(point);
                            break;
                        default:
                            point.status = "无状态请检查电池";
                            points5.push(point);
                    }
                }
                // 设置标记点参数
                var options1 = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#f2f2f2'
                };
                var options2 = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#ffbd14'
                };
                var options3 = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#75d235'
                };
                var options4 = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#4de8de'
                };
                var options5 = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#8a5322'
                };

            <#-- 分支判断 -->
            if (points1.length > 0) {
                var pointCollection = new BMap.PointCollection(points1, options1);
                pointCollection.addEventListener('click', function (e) {
                    var p=e.point;
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        width: 300,          // 信息窗口宽度
                        height: 150,         // 信息窗口高度
                        title: "电池信息",    // 信息窗口标题
                        enableMessage: false // 设置允许信息窗发送短息
                    };
                    var stylePoint = '<div style="margin-top:15px;">';
                    stylePoint += '<div>电池编号：'+p.id+'</div>';
                    stylePoint += '<div>外壳编号：'+(p.shellCode==null?"":p.shellCode)+'</div>';
                    stylePoint += '<div>soc：'+(p.socVolume==null?"":p.socVolume)+'%</div>';
                    stylePoint += '<div>状态：'+p.status+'</div>';
                    stylePoint += '<div>换电次数：'+p.exchangeAmount+'</div>';
                    stylePoint += '</div>';
                    var infowindow = new BMap.InfoWindow(stylePoint, opts);
                    map.openInfoWindow(infowindow, point);
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }
            if (points2.length > 0) {
                var pointCollection = new BMap.PointCollection(points2, options2);
                pointCollection.addEventListener('click', function (e) {
                    var p=e.point;
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        width: 300,          // 信息窗口宽度
                        height: 150,         // 信息窗口高度
                        title: "电池信息",    // 信息窗口标题
                        enableMessage: false // 设置允许信息窗发送短息
                    };
                    var stylePoint = '<div style="margin-top:15px;">';
                    stylePoint += '<div>电池编号：'+p.id+'</div>';
                    stylePoint += '<div>外壳编号：'+(p.shellCode==null?"":p.shellCode)+'</div>';
                    stylePoint += '<div>soc：'+(p.socVolume==null?"":p.socVolume)+'%</div>';
                    stylePoint += '<div>状态：'+p.status+'</div>';
                    stylePoint += '<div>换电次数：'+p.exchangeAmount+'</div>';
                    stylePoint += '</div>';
                    var infowindow = new BMap.InfoWindow(stylePoint, opts);
                    map.openInfoWindow(infowindow, point);
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }

            if (points3.length > 0) {
                var pointCollection = new BMap.PointCollection(points3, options3);
                pointCollection.addEventListener('click', function (e) {
                    var p=e.point;
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        width: 300,          // 信息窗口宽度
                        height: 150,         // 信息窗口高度
                        title: "电池信息",    // 信息窗口标题
                        enableMessage: false // 设置允许信息窗发送短息
                    };
                    var stylePoint = '<div style="margin-top:15px;">';
                    stylePoint += '<div>电池编号：'+p.id+'</div>';
                    stylePoint += '<div>外壳编号：'+(p.shellCode==null?"":p.shellCode)+'</div>';
                    stylePoint += '<div>soc：'+(p.socVolume==null?"":p.socVolume)+'%</div>';
                    stylePoint += '<div>状态：'+p.status+'</div>';
                    stylePoint += '<div>换电次数：'+p.exchangeAmount+'</div>';
                    stylePoint += '</div>';
                    var infowindow = new BMap.InfoWindow(stylePoint, opts);
                    map.openInfoWindow(infowindow, point);
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }
            if (points4.length > 0) {
                var pointCollection = new BMap.PointCollection(points4, options4);
                pointCollection.addEventListener('click', function (e) {
                    var p=e.point;
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        width: 300,          // 信息窗口宽度
                        height: 150,         // 信息窗口高度
                        title: "电池信息",    // 信息窗口标题
                        enableMessage: false // 设置允许信息窗发送短息
                    };
                    var stylePoint = '<div style="margin-top:15px;">';
                    stylePoint += '<div>电池编号：'+p.id+'</div>';
                    stylePoint += '<div>外壳编号：'+(p.shellCode==null?"":p.shellCode)+'</div>';
                    stylePoint += '<div>soc：'+(p.socVolume==null?"":p.socVolume)+'%</div>';
                    stylePoint += '<div>状态：'+p.status+'</div>';
                    stylePoint += '<div>换电次数：'+p.exchangeAmount+'</div>';
                    stylePoint += '</div>';
                    var infowindow = new BMap.InfoWindow(stylePoint, opts);
                    map.openInfoWindow(infowindow, point);
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }
            if (points5.length > 0) {
                var pointCollection = new BMap.PointCollection(points5, options5);
                pointCollection.addEventListener('click', function (e) {
                    var p = e.point;
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        width: 300,          // 信息窗口宽度
                        height: 150,         // 信息窗口高度
                        title: "电池信息",    // 信息窗口标题
                        enableMessage: false // 设置允许信息窗发送短息
                    };
                    var stylePoint = '<div style="margin-top:15px;">';
                    stylePoint += '<div>电池编号：'+p.id+'</div>';
                    stylePoint += '<div>外壳编号：'+(p.shellCode==null?"":p.shellCode)+'</div>';
                    stylePoint += '<div>soc：'+(p.socVolume==null?"":p.socVolume)+'%</div>';
                    stylePoint += '<div>状态：'+p.status+'</div>';
                    stylePoint += '<div>换电次数：'+p.exchangeAmount+'</div>';
                    stylePoint += '</div>';
                    var infowindow = new BMap.InfoWindow(stylePoint, opts);
                    map.openInfoWindow(infowindow, point);
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }
            <#-- 设置电池状态信息 -->
                var points1Length = points1.length;
                var points2Length = points2.length;
                var points3Length = points3.length;
                var points4Length = points4.length;
                var points5Length = points5.length;
                $("#status1").html(points1Length);
                $("#status2").html(points2Length);
                $("#status3").html(points3Length);
                $("#status4").html(points4Length);
                $("#status5").html(points5Length);
                var batterySum = points1Length+points2Length+points3Length+points4Length+points5Length;
                $("#battery_sum").html(batterySum);
            } else {
                $.messager.alert('提示消息', json.message, 'info');
            }
        }, 'json');
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
    function pointListInfo(list) {
        var pointArr = [];
        $.each(list, function (index, coor) {
            var point = new BMap.Point(coor.lng, coor.lat);
            pointArr.push(point);
            if (pointArr.length == 10 || index + 1 == list.length) {
                convertor.translate(pointArr, 1, 5, translateCallback);
                pointArr.length = 0;
            }
        });
    }
    function translateCallback(data) {
        $.each(data.points, function (index, point) {
            pointList.push(point)
        })
    }
    <#-- 查询电池 -->
    function query() {
        var batteryId = $("#battery_id").val();
        if (batteryId.length > 30) {
            alert("请填写符合的电池编号！");
        }
        if (batteryId == null && trim(batteryId) == "" ) {
            alert("请填写符合的电池编号！");
        }
        if (batteryIdList.length <= 0) {
            alert("没有对应的电池编号！");
        }
        var batteryExist = $.inArray(batteryId, batteryIdList); //如果存在返回值的下标，不存在返回-1
        if (batteryExist == -1) {
            alert("没有对应的电池编号！");
        }
        <#-- 有对应的电池,查询经纬度 -->
        if (batteryExist != -1) {
            var p = pointFindByBatteryId[batteryExist];
            var lngs = p.lng;
            var lats = p.lat;
            var bmapPoint = new BMap.Point(lngs, lats);
            map.centerAndZoom(bmapPoint, 15);
            <#-- 自动弹出信息窗口 -->
            var opts = {
                width: 280,          // 信息窗口宽度
                height: 150,         // 信息窗口高度
                title: "电池信息",    // 信息窗口标题
                enableMessage: false // 设置允许信息窗发送短息
            };
            var stylePoint = '<div style="margin-top:15px;">';
            stylePoint += '<div>电池编号：'+p.id+'</div>';
            stylePoint += '<div>外壳编号：'+(p.shellCode==null?"":p.shellCode)+'</div>';
            stylePoint += '<div>soc：'+(p.socVolume==null?"":p.socVolume)+'%</div>';
            stylePoint += '<div>状态：'+p.status+'</div>';
            stylePoint += '<div>换电次数：'+p.exchangeAmount+'</div>';
            stylePoint += '</div>';
            var infowindow = new BMap.InfoWindow(stylePoint, opts);
            map.openInfoWindow(infowindow, bmapPoint);
        }

    }
</script>
